<template>
    <div class="hotel-room-container">
        <!-- 顶部导航栏 -->
        <div class="header">
            <div class="back-button" @click="goBack"><i class="el-icon-back"></i></div>
            <div class="hotel-name">{{ this.receivedHotelName }}</div>
            <div @click="toggleFavorite">
                <i :class="{'el-icon-star-on': isFavorite, 'el-icon-star-off':!isFavorite}"></i>
            </div>
        </div>
        <!-- 房间列表 -->
        <div v-for="(room, index) in rooms" :key="index" class="room-item" @click="goToRoomDetails(room)">
            <img :src="room.img" alt="房间图片" class="room-image">
            <div class="room-details-and-button">
                <div class="room-details">
                    <div class="room-type">{{room.roomType}} / {{room.occupancy}}人</div>
                    <div class="room-price">￥{{room.price}} /每晚</div>
                </div>
                <button class="book-button" @click="bookRoom(room)">立即预定</button>
            </div>
        </div>
    </div>
</template>



<script>
export default {
    data() {
        return {
          receivedHotelName: '',
            isFavorite: false,
            rooms: []
        };
    },
  created() {
    this.findAll();
    this.receivedHotelName = this.$route.query.name || '';
    this.tid = this.$route.query.tid || '';
    console.log('接收到的酒店名称:', this.receivedHotelName);
    console.log('接收到的酒店id:', this.tid);
  },
    methods: {
      findAll(){
        this.axios.get('http://localhost:6001/api/hotel/findAll').then(res => {
          this.rooms = res.data
        })
      },
      goToRoomDetails(room) {
        this.$router.push({
          name: 'details', // 目标路由的名称
          query: {
            hotelName: this.receivedHotelName,
            tid: this.tid,
          }
        });
      },
        goBack() {
            // 这里可添加返回上一页逻辑，比如使用Vue Router
            console.log('返回上一页');
            this.$router.push('/homePage');
        },
        toggleFavorite() {
            this.isFavorite =!this.isFavorite;
        },
        bookRoom(room) {
            console.log(`预定 ${room.type} 房间`);
            // 可添加与后端交互预定房间的逻辑
        }
    },
};
</script>

<style scoped>
.hotel-room-container {
    background-color: #f4f4f4;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 95%;
    background-color: #fff; /* 根据需要设置背景颜色 */
    z-index: 1000; /* 确保标题栏在其他内容之上 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 可选：添加阴影效果 */
}

.room-item {
    padding-top: 60px; /* 根据 header 的高度调整，避免内容被 header 遮挡 */
}

.back-button {
    font-size: 20px;
    cursor: pointer;
}

.hotel-name {
    font-size: 18px;
    font-weight: bold;
}

.favorite-icon {
    font-size: 20px;
    cursor: pointer;
}

.room-item {
    background-color: white;
    margin: 15px;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column; /* 保持垂直排列 */
    align-items: center; /* 水平居中 */
}

.room-image {
    width: 380px; /* 放大图片宽度 */
    height: 230px; /* 放大图片高度 */
    object-fit: cover;
    border-radius: 5px; /* 圆角 */
    margin-bottom: 10px; /* 添加底部间距 */
}

.room-details-and-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 95%;
    padding: 15px;
}

.room-details {
    text-align: left; /* 文字靠左 */
}

.room-type {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
}

.room-price {
    color: #ff6600;
    font-size: 14px;
}

.book-button {
    background-color: #00bfff;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    margin: 5px;
}
</style>
